<%--
  Created by IntelliJ IDEA.
  User: sunhao
  Date: 2015/11/5 0005
  Time: 15:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>

<html>
<head>
    <title>支出管理</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%--<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">--%>
    <link href="/static/bui/css/bs3/dpl.css" rel="stylesheet" type="text/css"/>
    <link href="/static/bui/css/bs3/bui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="doc-content">
    <div class="panel">
        <div class="panel-header">
            <h3>收据信息</h3>
        </div>
        <div class="panel-body">
            <form id="searchForm" class="form-horizontal well" action="/expend/find" method="post">
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">开始时间：</label>

                        <div class="controls">
                            <input type="text" class="calendar" name="startDate" style="width: auto"/>
                        </div>
                    </div>

                    <div class="control-group span8">
                        <label class="control-label">结束时间：</label>

                        <div class="controls">
                            <input type="text" class="calendar" name="endDate" style="width: auto"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                <div class="control-group span8">
                        <label class="control-label">管理员姓名：</label>

                        <div class="controls">
                            <select name="manager" class="input-normal bui-form-field-select bui-form-field"
                                    aria-disabled="false" aria-pressed="false">
                                <option value="">请选择</option>
                                <c:forEach items="${managers}" var="p">
                                    <option value="${p._id}">${p.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">支出行为：</label>

                        <div class="controls">
                            <select name="action" class="input-normal bui-form-field-select bui-form-field"
                                    aria-disabled="false" aria-pressed="false">
                                <option value="">请选择</option>
                                <c:forEach items="${actions}" var="p">
                                    <option value="${p._id}">${p.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="span3 offset2">
                        <input value="搜索" type="submit" id="btnSearch" class="button button-primary"/>
                    </div>
                </div>
            </form>

            <div class="row">
                <div class="control-group span8" style="padding-left: 120px;float: right">
                    <label class="control-label">总计：<span>${expendCount}</span>元</label>
                </div>
            </div>

            <div class="row">
                <div class="span21 offset3 control-row-auto">
                    <div id="grid"></div>
                    <input type="hidden" name="eduation">
                </div>
            </div>

            <div id="resource_content" class="hide">
                <form id="resource_Form" class="form-horizontal bui-form-horizontal bui-form bui-form-field-container">
                    <div class="row" style="display: none">
                        <div class="control-group span8">
                            <label class="control-label"><s>*</s>_id：</label>

                            <div class="controls">
                                <input name="_id" type="text" class="input-normal control-text bui-form-field"
                                       aria-disabled="false" aria-pressed="false">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label"><s>*</s>管理员：</label>

                            <div class="controls">
                                <select name="manager" class="input-normal bui-form-field-select bui-form-field"
                                        aria-disabled="false" aria-pressed="false" required="required" >
                                    <option value="">请选择</option>
                                    <c:forEach items="${managers}" var="p">
                                        <option value="${p._id}">${p.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label"><s>*</s>日期</label>

                            <div class="controls">
                                <p>
                                    <input type="text" class="calendar" name="date" style="width: auto" required="required" />
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label"><s>*</s>支出行为：</label>

                            <div class="controls">
                                <select name="action" class="input-normal bui-form-field-select bui-form-field"
                                        aria-disabled="false" aria-pressed="false" required="required" >
                                    <option value="">请选择</option>
                                    <c:forEach items="${actions}" var="p">
                                        <option value="${p._id}">${p.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label">教师(选填)：</label>

                            <div class="controls">
                                <select name="teacher" class="input-normal bui-form-field-select bui-form-field"
                                        aria-disabled="false" aria-pressed="false">
                                    <option value="">请选择</option>
                                    <c:forEach items="${teachers}" var="p">
                                        <option value="${p._id}">${p.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label"><s>*</s>支出描述：</label>

                            <div class="controls">
                                <input name="description" type="text" class="input-normal control-text" required="required" >
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label"><s>*</s>金额：</label>

                            <div class="controls">
                                <input name="pay" type="text" class="input-normal control-text" required="required" >
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="control-group span8">
                            <label class="control-label">支出方式</label>

                            <div class="controls">
                                <select name="way" class="input-normal bui-form-field-select bui-form-field"
                                        aria-disabled="false" aria-pressed="false" required="required" >
                                    <option value="">请选择</option>
                                    <option value="0">现金</option>
                                    <option value="1">转账</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
            <script type="text/javascript" src="/static/bui/js/jquery-1.8.1.min.js"></script>
            <script type="text/javascript" src="/static/bui/js/bui.js"></script>
            <script type="text/javascript" src="/static/bui/js/config.js"></script>
            <%--<script type="text/javascript">--%>
            <%--BUI.use('common/page');--%>
            <%--</script>--%>
            <script type="text/javascript">

                BUI.use('bui/calendar', function (Calendar) {
                    var datepicker = new Calendar.DatePicker({
                        trigger: '.calendar',
                        autoRender: true
                    })
                })

                BUI.use(['bui/grid', 'bui/data', 'bui/form'], function (Grid, Data, Form) {
                    var columns = [
                                {title: '日期', dataIndex: 'date', width:'15%'},
                                {title: '管理员', dataIndex: 'manager', width: '10%'},
                                {title:'行为',dataIndex:'action',width:'20%'},
                                {title: '描述', dataIndex: 'description', width: '25%'},
                                {title:'金额',dataIndex:'pay',width:'10%'},
                                {
                                    title: '操作', width: '15%', renderer: function () {
                                    var editStr = '<span class="grid-command btn-edit"><i class="icon-edit"></i>编辑</span>';
                                    return editStr
                                }
                                }
                            ],
                    //默认的数据
                            data = [
                                <c:forEach items="${expends}" var="p">
                                {
                                    _id: '${p._id}',
                                    date: '${p.date}',
                                    manager: '${p.manager}',
                                    action:'${p.action}',
                                    way:'${p.way}',
                                    description:'${p.description}',
                                    pay:'${p.pay}'
                                },
                                </c:forEach>
                            ],
                            store = new Data.Store({
                                data: data,
                                pageSize: 20
                            }),
                            editing = new Grid.Plugins.DialogEditing({
                                contentId: 'resource_content',
                                triggerCls: 'btn-edit',
                                editor: {
                                    focusable: false,
                                    success: function () {
                                        var editType = editing.get('editType'),
                                                edtor = this,
                                                form = edtor.get("form");
                                        form.valid();
                                        if (form.isValid()) {
                                            this.close();
                                            if (editType == 'add') {
                                                $.ajax({
                                                    type: 'post',
                                                    url: '/expend/addExpend',
                                                    data: $("#resource_Form").serialize(),
                                                    success: function (msg) {
                                                        if (msg == 'success') {
                                                            msg = "添加成功！";
                                                            BUI.Message.Alert(msg, function () {
                                                                window.location.href = '/expend/list.do';
                                                            }, 'success')
                                                        } else {
                                                            msg = "添加失败！";
                                                            BUI.Message.Alert(msg, function () {
                                                                window.location.href = '/jsp/error/noAuthority.jsp';
                                                            }, 'error')
                                                        }

                                                    }
                                                })
                                            } else {
                                                $.ajax({
                                                    type: 'post',
                                                    url: '/expend/updateExpend',
                                                    data: $("#resource_Form").serialize(),
                                                    success: function (msg) {
                                                        if (msg == 'success') {
                                                            msg = '修改成功！';
                                                            BUI.Message.Alert(msg, function () {
                                                                window.location.href = '/expend/list.do';
                                                            }, 'success')
                                                        } else {
                                                            msg = '修改失败！';
                                                            BUI.Message.Alert(msg, function () {
                                                                window.location.href = '/jsp/error/noAuthority.jsp';
                                                            }, 'error')
                                                        }
                                                    }
                                                })
                                            }
                                        }
                                    }
                                }
                            }),
                            grid = new Grid.Grid({
                                render: '#grid',
                                columns: columns,
                                width: '100%',
//                    forceFit: true,
                                plugins: [Grid.Plugins.AutoFit],
                                store: store,
                                bbar: {
                                    pagingBar: true,
                                    elCls: 'image-pbar'
                                },
                                plugins: [Grid.Plugins.CheckSelection, editing],
                                tbar: {
                                    items: [{
                                        btnCls: 'button button-small',
                                        text: '<i class="icon-plus"></i>添加',
                                        listeners: {
                                            'click': addFunction
                                        }
                                    },
                                        {
                                            btnCls: 'button button-small',
                                            text: '<i class="icon-remove"></i>删除',
                                            listeners: {
                                                'click': delFunction
                                            }
                                        }
//                                        ,
//                                        {
//                                            btnCls: 'button button-small',
//                                            text: '<i class="icon-plus"></i>导出表格',
//                                            listeners: {
//                                                'click': exportFunction
//                                            }
//                                        }
                                    ]
                                }
                            });
                    grid.render();


                    function addFunction() {
                        var newData = {};
                        editing.add(newData); //添加记录后，直接编辑
                    }

                    function delFunction() {
                        var selections = grid.getSelection();
                        delItems(selections);
                    }

                    function delItems(items) {
                        var _ids = [];
                        BUI.each(items, function (item) {
                            _ids.push(item._id)
                        });
                        if (_ids.length) {
                            BUI.Message.Confirm('确认要删除吗？', function () {
                                $.ajax({
                                    type: 'POST',
                                    url: '/expend/delExpend?_ids=' + _ids,
                                    success: function (msg) {
                                        if (msg == 'success') {
                                            msg = "删除成功！"
                                        }
                                        BUI.Message.Alert(msg, function () {
                                            window.location.href = '/expend/list.do';
                                        }, 'success')
                                    }
                                })
                            })
                        }
                    };
                    var form = new Form.HForm({
                        srcNode: '#resource_Form'
                    });
                });
            </script>
        </div>
    </div>
</div>
</body>
</html>
